<!doctype html>
<html lang="en">

	<head>
		<title>Royal Hotel</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Rubik:300,400,700" rel="stylesheet">

		<link rel="stylesheet" href="../css/bootstrap.css">
		<link rel="stylesheet" href="../css/animate2.css">
		<link rel="stylesheet" href="../css/owl.carousel.min.css">

		<link rel="stylesheet" href="../fonts/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="../fonts/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/magnific-popup.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css">

		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/jquery-migrate-3.0.0.js"></script>
		<script src="../js/popper.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/owl.carousel.min.js"></script>
		<script src="../js/jquery.waypoints.min.js"></script>
		<script src="../js/jquery.stellar.min.js"></script>
		<script src="../js/jquery.magnific-popup.min.js"></script>
		<script src="../js/magnific-popup-options.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

		<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
		<!-- Theme Style -->
		<link rel="stylesheet" href="../css/style4.css">
	</head>

	<body>

		<!-- END header -->

		<!--<section class="site-hero site-hero-innerpage overlay" data-stellar-background-ratio="0.5" style="background-image: url(../images/big_image_1.jpg);">
			<div class="container">
				<div class="row align-items-center site-hero-inner justify-content-center">
					<div class="col-md-12 text-center">

						<div class="mb-5 element-animate">
							<h1>Reservation</h1>
							<p>Discover our world's #1 Luxury Room For VIP.</p>
						</div>

					</div>
				</div>
			</div>
		</section>-->
		<!-- END section -->

		<section class="site-section">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						<h2 class="mb-5">预定信息</h2>
						<form id="registerForm" action="/order/insert/attr"  method="post">
							<div class="row">
								<div class="col-sm-6 form-group">

									<label for="">入住时间</label>
									<div style="position: relative;">
										<span class="fa fa-calendar icon" style="position: absolute; right: 10px; top: 10px;"></span>
										<input type='text' name="ocb[0].startTime" class="form-control" id='arrival_date' />
									</div>
								</div>

								<div class="col-sm-6 form-group">

									<label for="">退房时间</label>
									<div style="position: relative;">
										<span class="fa fa-calendar icon" style="position: absolute; right: 10px; top: 10px;"></span>
										<input type='text' name="ocb[0].endTime" class="form-control" id='departure_date' />
									</div>
								</div>

							</div>

							
							<div class="row">
								<div class="col-md-6 form-group">
									<label for="name">房间类型</label>
									<select id="roomtypek" class="form-control"  name="ocb[0].roomtype.id"  onchange="changeroom()">
										<option value="普通套房">普通套房</option>
										
									
									</select>
								</div>
								
							</div>
							<div class="row">
								<div class="col-md-6 form-group">
									<label for="name">入住人姓名</label>
									<input type="text" name="ocb[0].guestId.name" class="form-control " maxlength="20">
								</div>
								<div class="col-md-6 form-group">
									<label for="identity">入住人身份证</label>
									<input type="name" name="ocb[0].guestId.idCard" class="form-control " maxlength="18">
								</div>
							</div>
							<div class="row">
								<div class="col-md-6 form-group">
									<label for="name">入住人手机号</label>
									<input type="name"  class="form-control " name="tel">
								</div>
								<div class="col-md-6">
									<a href="accomodation.html">
									<input type="button" value="返回房间列表"  class="btn btn-primary" style="margin-top: 30px;margin-left: 40px; height: 50px; border-radius: 50px;">
									</a>
									<div class="col-xs-5" style="padding-top: 30px">
										<div id="idcode" style="background: transparent;"></div>
									</div>
								</div>
								<div class="col-xs-5" style="padding-top: 30px">
									<div id="idcode" style="background: transparent;"></div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 form-group">
									<label for="message">备注</label>
									<textarea  name="message" id="message" class="form-control " cols="30" rows="8" ></textarea>
								</div>
							</div>
							
							<div class="row">
								<div class="col-md-6 form-group">
									<label for="message">订单总价:<span style="color: red;" id="totalPrice">￥800</span></label>
									
								</div>
							</div>
							<div class="row">
								<div class="col-md-6 form-group">
									<input type="submit" value="提交订单" class="btn btn-primary" >
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-1"></div>
					<div class="col-md-5">
						<h3 class="mb-5">房间展示</h3>
						<div class="media d-block room mb-0">
							<figure>
								<img src="../images/img_1.jpg" alt="Generic placeholder image" class="img-fluid" id="roomimg">
								<div class="overlap-text"   id="ordertypename">
									<span>
                    				大床房 
                    				<span class="ion-ios-star"></span>
									<span class="ion-ios-star"></span>
									<span class="ion-ios-star"></span>
									</span>
								</div>
							</figure>
							<div class="media-body">
								<h3 class="mt-0"><a href="#">价格￥：<span style="color: red;font-family: '微软雅黑';" id="roomtypeprice">800</span></a></h3>
								<ul class="room-specs">
									<li><span class="ion-ios-people-outline"></span> 2 位</li>
									<li><span class="ion-ios-crop"></span> 22 ft <sup>2</sup></li>
								</ul>
								<p id="roomtypemessage">房间描述. </p>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- END section -->

		<section class="section-cover" data-stellar-background-ratio="0.5" style="background-image: url(../images/img_5.jpg);">
			<div class="container">
				<div class="row justify-content-center align-items-center intro">
					<div class="col-md-9 text-center element-animate">
						<h2>Relax and Enjoy your Holiday</h2>
						<p class="lead mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quidem tempore expedita facere facilis, dolores!</p>
						<div class="btn-play-wrap">
							<a href="https://vimeo.com/channels/staffpicks/93951774" class="btn-play popup-vimeo "><span class="ion-ios-play"></span></a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- END section -->

		<footer class="site-footer">
			<div class="container">
				<div class="row mb-5">
					<div class="col-md-4">
						<h3>Phone Support</h3>
						<p>24/7 Call us now.</p>
						<p class="lead">
							<a href="tel://">+ 1 332 3093 323</a>
						</p>
					</div>
					<div class="col-md-4">
						<h3>Connect With Us</h3>
						<p>We are socialized. Follow us</p>
						<p>
							<a href="#" class="pl-0 p-3"><span class="fa fa-facebook"></span></a>
							<a href="#" class="p-3"><span class="fa fa-twitter"></span></a>
							<a href="#" class="p-3"><span class="fa fa-instagram"></span></a>
							<a href="#" class="p-3"><span class="fa fa-vimeo"></span></a>
							<a href="#" class="p-3"><span class="fa fa-youtube-play"></span></a>
						</p>
					</div>
					<div class="col-md-4">
						<h3>Connect With Us</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, odio.</p>
						<form action="#" class="subscribe">
							<div class="form-group">
								<button type="submit"><span class="ion-ios-arrow-thin-right"></span></button>
								<input type="email" class="form-control" placeholder="Enter email">
							</div>

						</form>
					</div>
				</div>
				<div class="row justify-content-center">
					<div class="col-md-7 text-center">
						&copy; Copyright &copy;
						<script>
							document.write(new Date().getFullYear());
						</script> All rights reserved 
						
					</div>
				</div>
			</div>
		</footer>
		<!-- END footer -->

		<!-- loader -->
		<div id="loader" class="show fullscreen">
			<svg class="circular" width="48px" height="48px">
				<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
				<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214" />
			</svg>
		</div>
		<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
		<script>
			$('#arrival_date, #departure_date').datepicker({
				language: "zh-CN",
            	autoclose: true,//选中之后自动隐藏日期选择框
               	format: "yyyy-mm-dd",//日期格式
				todayHighlight: true,
				startDate: new Date()
			});
		</script>
		<script src="../js/main.js"></script>
		<script>
			$(document).ready(function() {
				
						$('#registerForm').bootstrapValidator({
							
							message: '此值无效!',
							feedbackIcons: {
								valid: 'glyphicon glyphicon-ok',
								invalid: 'glyphicon glyphicon-remove',
								validating: 'glyphicon glyphicon-refresh'
							},
							fields: {
								username: {
									validators: {
										notEmpty: {
											message: '姓名值不能为空！'
										},
										stringLength: {
											min: 2,
											message: '用户名长度必须大于2！'
										},
										regexp: {
											regexp: /^[a-zA-Z\u4e00-\u9fa5]+$/,
											message: '用户名不能有数字和字符！'
										}

									},
								},

								identity: {
									validators: {
										notEmpty: {
											message: '身份证号码不能为空！'
										},
										regexp: {
											regexp: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
											message: '身份证号码格式不正确，为15位和18位身份证号码！'
										},
										callback: { /*自定义，可以在这里与其他输入项联动校验*/
											message: '身份证号码无效！',
											callback: function(value, validator, $field) {
												//15位和18位身份证号码的正则表达式
												var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
												//如果通过该验证，说明身份证格式正确，但准确性还需计算
												var idCard = value;
												if(regIdCard.test(idCard)) {
													if(idCard.length == 18) {
														var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
														var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
														var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
														for(var i = 0; i < 17; i++) {
															idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
														}
														var idCardMod = idCardWiSum % 11; //计算出校验码所在数组的位置
														var idCardLast = idCard.substring(17); //得到最后一位身份证号码
														//如果等于2，则说明校验码是10，身份证号码最后一位应该是X
														if(idCardMod == 2) {
															if(idCardLast == "X" || idCardLast == "x") {
																return true;
																//alert("恭喜通过验证啦！");
															} else {
																return false;
																//alert("身份证号码错误！");
															}
														} else {
															//用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
															if(idCardLast == idCardY[idCardMod]) {
																//alert("恭喜通过验证啦！");
																return true;
															} else {
																return false;
																//alert("身份证号码错误！");
															}
														}
													}
												} else {
													//alert("身份证格式不正确!");
													return false;
												}
											}
										}
									}
								},

								tel: {
									validators: {
										notEmpty: {
											message: '手机号码不能为空！'
										},
										regexp: {
											regexp: /^1[34578]\d{9}$/,
											message: '请输入完整手机号码！'
										}
									}
								},

								
									arrival_date: {
										trigger: "change",
										validators: {
											notEmpty: {
												message: '请选择开始时间'
											}
										}
									},
									departure_date: {
										trigger: "change",
										validators: {
											notEmpty: {
												message: '请选择结束时间'
											},
											callback: {
												message: '退房时间必须大于入住时间',
												callback: function(value, validator, $field) {
													let other = validator.getFieldElements('arrival_date').val(); //获得另一个的值

													let start = new Date(other.replace("-", "/").replace("-", "/"));
													let end = new Date(value.replace("-", "/").replace("-", "/"));

													if(start <= end) {
														return true;
													}
													return false;
												}
											}
										}
									}
								}
						})
						
						})
						
					
				$(function(){
					$.ajax({
						type:"get",
						url:"/roomtype",
						async:true,
						dataType:"json",
						success:function(mes){
							var str="";
							for(var i=0;i<mes.length;i++){
							str+="<option value='"+mes[i].id+"'>"+mes[i].name+"</option>"
							
						}
							console.info($("#roomtypek").children('option').val())
							$("#roomtypek").html(str)
					}
				})
				})
				
			
			
			function changeroom() {
				 var roomtypeid = $('#roomtypek  option:selected').val();  
				 showroom(roomtypeid);
			}
			
					function showroom(roomtID) {
						$.ajax({
							type:"get",
							url:"/roomtype/"+roomtID,
							async:true,
							dataType:"json",
							success:function(mes){
								
								var name="<span>"+mes.name+"<span class='ion-ios-star'></span><span class='ion-ios-star'></span>	<span class='ion-ios-star'></span></span>";
								var price=mes.price;
								var message=mes.message;
								var totalprice=mes.discounts*price;
								var src="../images/img_1.jpg";
								$("#roomtypeprice").text(price);
								$("#roomtypemessage").text(message);
								$("#totalPrice").text(price);
								$("#ordertypename").html(name);
								$("#roomimg").attr("src",src);
								
								
								
						}
					})
					}
					/* 
					$("#btn").click(function(){
						
						var order=$("#registerForm").serializeArray()
						//var order=JSON.stringify($('#registerForm').serializeJSON());
						
						console.info(order)
						
						console.info(JSON.stringify(order))
						$.ajax({
							url:"/order/insert/attr",
							type:"post",
							async:true,
							contentType:"application/json;charset=utf-8",
							data:JSON.stringify(order),
							
							success:function(mes){
								alert('mes')
								window.location.href="/html/index.html";
								console.info(mes);
							}
						});
					}); */
				
		</script>
	</body>

</html>